<template>
	<div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row>
				<el-col :span="12">
					<el-form-item label="头像" prop="Image">
						<el-upload class="avatar-uploader" :action="baseapi + '/Files'" :show-file-list="false"
							:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="ruleForm.Image" :src="baseImg + ruleForm.Image" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="姓名" prop="UserName">
						<el-input v-model="ruleForm.UserName" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="Sex">
						<el-radio-group v-model="ruleForm.Sex">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="出生日期" required>
						<el-form-item prop="Birthday" style="width: 200px;">
							<el-date-picker type="datetime" placeholder="选择出生日期" v-model="ruleForm.Birthday"
								style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-form-item>

					<el-form-item label="手机号码" prop="Phone">
						<el-input v-model="ruleForm.Phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="登录昵称" prop="LoginName">
						<el-input v-model="ruleForm.LoginName" placeholder="请输入昵称"></el-input>
					</el-form-item>
					<el-form-item label="部门">
						<el-select v-model="ruleForm.DeptID" @input="Sea" placeholder="请选择部门">
							<el-option v-for="(item, index) in Department" :key="index" :label="item.deptName"
								:value="item.deptID"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="角色">
						<el-select v-model="ruleForm.RoleID" placeholder="请选择角色">
							<el-option v-for="(item, index) in roles" :key="index" :label="item.RoleName"
								:value="item.RoleID"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态" prop="Status">
						<el-switch v-model="ruleForm.Status"></el-switch>
					</el-form-item>
					<el-form-item>
						<el-button type="warning" @click="submitForm('ruleForm')">更新数据</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
import basepath from '@/plugins/base.js'
export default {
	name: "Upd",
	data() {
		return {
			baseapi: '',
			baseImg: '',
			roles: [],
			Department: [],
			ruleForm: {},
			rules: {
				UserName: [
					{required: true,message: '请输入姓名',trigger: 'blur'},
					{min: 2,max: 5,message: '长度在 2 到 5 个字符',trigger: 'blur'}
				],
				LoginName: [
					{required: true,message: '请输入登录昵称',trigger: 'blur'},
					{min: 2,max: 5,message: '长度在 2 到 5 个字符',trigger: 'blur'}
				],
				Sex: [{required: true,message: '请选择性别',trigger: 'change'}],
				Phone: [
					{required: true,message: '请输入手机号码',trigger: 'blur'},
					{min: 11,max: 11,message: '长度在为11位数字',trigger: 'blur'}
				]
			}
		}
	},
	model: {
    prop: "dialogFormVisible",
    event: "change",
  },
  props: {
    dialogFormVisible: Boolean,
    data: Object,
  },
	methods: {
		//上传成功
		handleAvatarSuccess(res, file) {
			console.log(file)
			if (res.code == 1) {
				this.$notify.success({ title: '成功', message: '图片上传成功!' })
				this.ruleForm.Image = res.data;
			} else {
				this.$message.error(res.msg);
			}
		},
		//上传之前
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isPNG = file.type === 'image/png';

			const isLtMB = file.size / 1024 / 1024 < 10;

			if (!isJPG && !isPNG) {
				this.$notify.error({ title: '失败', message: '上传头像图片只能是 JPG 和 PNG 格式!' })
			}
			if (!isLtMB) {
				this.$notify.error({ title: '失败', message: '上传头像图片大小不能超过 10MB!' })
			}
			return (isJPG || isPNG) && isLtMB;
		},
		//提交表单
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.axios({
						method: 'Put',
						url: 'Users/',
						data: JSON.stringify(this.ruleForm),
						headers: {
							Authorization: sessionStorage.getItem('token'),
							'Content-Type': 'application/json'
						}
					}).then(res => {
						if (res.data.msg == '用户信息更改成功！') {
							this.$notify({
								title: '成功',
								message: res.data.msg,
								type: 'success'
							});
							// 触发刷新
							this.$emit('refresh')

							this.$emit("change", false);
						} else {
							this.$notify.error({
								title: '错误',
								message: res.data.msg
							});
						}
					}).catch(err => {
						console.log('err: ', err);
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		//下拉框事件
		Sea(value) {
			this.roles = null;
			this.GetRoles(value, false);
		},
		//获取角色数据
		GetRoles(value, bol) {
			if (value != null) {
				this.axios({
					method: 'get',
					url: 'Roles',
					params: {
						did: value
					},
					headers: {
						Authorization: sessionStorage.getItem('token')
					}
				}).then(res => {
					this.roles = res.data.data;
					if (!bol) this.ruleForm.RoleID = this.roles[0].RoleID;
				})
			}
		}
	},
	watch: {
		dialogFormVisible(v) {
			if (v) this.ruleForm = JSON.parse(JSON.stringify(this.data));
			this.GetRoles(this.ruleForm.DeptID, true)
		}
	},
	created() {
		this.baseapi=basepath.apiUrl;
		this.baseImg=basepath.imgUrl;
		this.ruleForm = JSON.parse(JSON.stringify(this.data));
		//获取部门数据
		this.axios({
			method: 'get',
			url: 'Department',
			headers: {
				Authorization: sessionStorage.getItem('token')
			}
		}).then(res => {
			this.Department = res.data.data;
			this.GetRoles(this.ruleForm.DeptID, true);
		})
	}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>